<template>
  <div
    :id="id"
    class="main"
    :style="{ width: width, height: height }"
    :ref="id"
  ></div>
</template>

<script>
// import ResumeDiagnosis from "@/views/dataDetail/components/ResumeDiagnosis.vue";
import * as echarts from "echarts";

export default {
  name: "roseChart",

  data() {
    return {
      myEchart: null,
    };
  },
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    // 数据（数组）
    typeAnalysisData: {
      type: Array,
      default: () => [],
    },
    id: {
      type: String,
      default: "roseChart",
    },
    // 是否显示提示（方框）
    legendShow: {
      type: Boolean,
      default: true,
    },
    // 上面距离
    legendTop: {
      type: String,
      default: "auto",
    },
    // 左面距离
    legendLeft: {
      type: String,
      default: "auto",
    },
    // 排列方式
    legendOrient: {
      type: String,
      default: "vertical",
    },
    // 字体颜色（方框）
    legendColor: {
      type: String,
      default: "#8493c3",
    },
    // 字体大小（方框）
    legendFontSize: {
      type: String,
      default: "16px",
    },
    titleFontSize: {
      type: Number,
      default: 34,
    },
    titleColor: {
      type: String,
      default: "#8493c3",
    },
    // 饼图的半径
    radius: {
      type: Array,
      default: () => [],
    },
    // 文本标签
    labelShow: {
      type: Boolean,
      default: true,
    },
    labelPosition: {
      type: String,
      default: "center",
    },
    // 文本字体大小
    labelFontSize: {
      type: Number,
      default: 14,
    },
    // 文本字体行高
    lineHeight: {
      type: Number,
      default: 15,
    },
    // 文本字体颜色
    labelColor: {
      type: String,
      default: "#8493c3",
    },
    activeFontSize: {
      type: Number,
      default: 15,
    },
    activeColor: {
      type: String,
      default: "#8493c3",
    },
    // 中心
    center: {
      type: Array,
      default: () => [],
    },
    // 标题
    titleShow: {
      type: Boolean,
      default: true,
    },
    // 主标题
    text: {
      type: String,
      default: "主标题",
    },
    // 副标题
    subtext: {
      type: String,
      default: "副标题",
    },
    // 标题位置（上下）
    titleTop: {
      type: String,
      default: "80px",
    },
    // 标题位置（左右）
    titleLeft: {
      type: String,
      default: "120px",
    },
  },

  methods: {
    drawChart() {
      let timer = null;
      timer = setTimeout(() => {
        if (
          this.myEchart != null &&
          this.myEchart != "" &&
          this.myEchart != undefined
        ) {
          this.myEchart.dispose(); //销毁
        }
        if (!this.$refs[this.id]) return;
        this.myEchart = echarts.init(this.$refs[this.id]);
        let option = {
          title: {
            show: this.titleShow,
            top: this.titleTop,
            left: this.titleLeft,
            text: this.text, //主标题
            subtext: this.subtext, //副标题
            textStyle: {
              //标题样式
              fontSize: 26,
              fontWeight: "bolder",
              color: "#333333",
            },
            subtextStyle: {
              //副标题样式
              fontSize: 16,
              fontWeight: "bolder",
              color: "#888888",
            },
          },
          legend: {
            show: false,
            orient: this.legendOrient,
            top: this.legendTop,
            left: this.legendLeft,
            itemHeight: 4,
            itemWidth: 8,
            textStyle: {
              color: this.legendColor,
              fontSize: this.legendFontSize,
            },
          },
          series: [
            {
              name: "mychart",
              type: "pie",
              radius: this.radius,
              center: this.center,
              // roseType: "radius",
              itemStyle: {
                normal: {
                  color: function (colors) {
                    var colorList = ["#6115FF", "#1AC99D"];
                    return colorList[colors.dataIndex];
                  },
                  borderRadius: 0,
                },
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                  borderColor: "rgba(255, 255, 255, 1)", // 高亮时的边框颜色
                  borderWidth: 1, // 高亮时的边框宽度
                },
              },
              label: {
                show: this.labelShow,
                alignTo: "edge",
                formatter: "{name|{b}}\n{time|{d} %}",
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: this.lineHeight,
                rich: {
                  time: {
                    fontSize: this.labelFontSize,
                    color: this.labelColor,
                  },
                  name: {
                    fontSize: this.labelFontSize,
                    color: this.labelColor,
                  },
                },
              },
              labelLine: {
                length: 15,
                length2: 0,
                maxSurfaceAngle: 80,
              },
              data: this.typeAnalysisData,
            },
          ],
        };

        this.myEchart.setOption(option);
        this.myEchart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });

        // 为饼状图添加鼠标悬浮的事件监听器
        this.myEchart.on("mouseover", (params) => {
          if (params.componentType == "series") {
            switch (params.name) {
              case "线下扫码访问人数占比":
                option.title.text = this.text;
                option.title.subtext = "线下扫码";
                this.myEchart.setOption(option);
                this.myEchart.dispatchAction({
                  type: "highlight",
                  seriesIndex: 0,
                  dataIndex: 0,
                });
                this.myEchart.dispatchAction({
                  type: "downplay",
                  seriesIndex: 0,
                  dataIndex: 1,
                });
                break;
              case "长按识别访问人数占比":
                option.title.text = this.typeAnalysisData[1].value + "%";
                option.title.subtext = "长按识别";
                this.myEchart.setOption(option);
                this.myEchart.dispatchAction({
                  type: "highlight",
                  seriesIndex: 0,
                  dataIndex: 1,
                });
                this.myEchart.dispatchAction({
                  type: "downplay",
                  seriesIndex: 0,
                  dataIndex: 0,
                });
                break;
              default:
                break;
            }
          }
        });
      }, 500);
    },
  },

  mounted() {
    this.drawChart();
  },

  watch: {
    typeAnalysisData: {
      handler(newName, oldName) {
        this.$nextTick(() => {
          this.drawChart();

          window.addEventListener("resize", this.drawChart);
        });
      },

      deep: true,
    },
  },

  destroyed() {
    window.removeEventListener("resize", this.drawChart);
  },
};
</script>

<style lang="scss" scoped></style>
